<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>textarea</title>
  <script src="../../lib/vue/vue.js"></script>
  <style>
  .textarea {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 500px;
    height: 250px;
    padding: 10px;
    border: 1px solid;
  }

  .text {
    display: block;
    width: 100%;
    height: 100%;
  }

  .length {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .red {
    color: red;
  }

  textarea {
    display: block;
    width: 500px;
    height: 250px;
  }
  </style>
</head>

<body>
  <textarea id="abc" cols="30" rows="10"></textarea>
  <div id="app">
    <span>push-></span>
    <input type="text" v-model="push">
    <p><span>pull-></span>{{pull}}</p>
    <mytextarea ref="text1" byte="2" maxlength="100" v-bind:request="push" v-on:callback="parentFn">
    </mytextarea>
    <button v-on:click="parenttest()" type="button">清空内容</button>
    <button v-on:click="getData()" type="button">获取内容</button>
  </div>
  <script>
  Vue.component( 'mytextarea', {
    template: `
            <div>
              <span>request</span>
              <div class="textarea">
                <div
                  @keydown="keydown($event)"
                  @input="input($event)"
                  @focus="focus($event)"
                  v-html="text"
                  class="text"
                  contenteditable="true">
                </div>
                <span class="length">
                  <span v-bind:class="{'red':length>maxlength}">{{length}}</span>
                  /{{maxlength}}
                </span>
              </div>
              <p><span>response-></span>{{response}}</p>
            </div>
          `,
    props: {
      request: {
        type: [ String, Number ],
        default: '请输入文字'
      },
      // 1 按length算长度 2 按字节算长度
      byte: {
        type: [ String, Number ],
        default: 1
      },
      maxlength: {
        type: [ String, Number ],
        default: 0
      }
    },
    data( ) {
      return {
        response: this.request,
        text: this.request
      }
    },
    methods: {
      keydown( e ) {
        //console.log(e)
        // var range = window.getSelection().getRangeAt(0);
        //window.getSelection().setStart(2,0)
        //var range = document.createRange()
        var startP = 123;
        var endLi = 'abc';
        window.getSelection( ).getRangeAt( 0 ).setStart( startP, 0 )
      },
      input( e ) {
        this.response = e.target.innerText
        // this.response = e.target.innerText.substring(0,this.maxlength)
        this.enter( )
      },
      focus( e ) {
        this.enter( )
      },
      enter( ) {
        var json = {
          content: this.response,
          length: this.length,
          maxlength: this.maxlength,
          overflow: this.length > this.maxlength ? true : false
        }
        this.$emit( 'callback', json )
      },
      output( ) {
        var json = {
          content: this.response,
          length: this.length,
          maxlength: this.maxlength,
          overflow: this.length > this.maxlength ? true : false
        }
        return json
      },
      clear( ) {
        this.text = ''
        this.response = ''
      }
    },
    watch: {
      request: function ( ) {
        this.response = this.request
        this.text = this.request
      }
    },
    computed: {
      length: {
        get( e ) {
          if ( Number( this.byte ) === 2 ) {
            return this.response.replace( /[^\x00-\xff]/g, "**" ).length
          } else {
            return this.response.length
          }
        }
      }
    },
    created( ) {
      console.log( this.byte, typeof this.byte )
    }
  } )

  var app = new Vue( {
    el: '#app',
    data( ) {
      return {
        push: 'push',
        pull: ''
      }
    },
    methods: {
      parentFn( data ) {
        // console.log(data)
        this.pull = data.content;
      },
      parenttest( ) {
        this.$refs.text1.clear( )
      },
      getData( ) {
        var data = this.$refs.text1.output( )
        console.log( data )
      }
    }
  } );
  </script>
</body>

</html>